<template>
	<view>
		<totalMask :show.sync="isShow" :showType="showType">
			<view class="nvue-flex">
				<view class="title-bg">
					<text class="title">在线观众</text>
				</view>

				<scroll-view scroll-y class="list" show-scrollbar @scrolltolower='onLoadMore'>
					<view class="view">
						<block v-for="(item, index) in list" :key="index">
							<view class="item" @click="showUserInfo(item.id)">
								<view class="rank-bg">
									<image v-if="index == 0" class="rank-img" src="@/static/look/rank_first.png">
									</image>
									<image v-else-if="index == 1" class="rank-img" src="@/static/look/rank_second.png">
									</image>
									<image v-else-if="index == 2" class="rank-img" src="@/static/look/rank_third.png">
									</image>

									<text v-else class="rank-tt">{{index + 1}}</text>
								</view>

								<image class="avatar" :src="item.user.avatar"></image>

								<text class="nickname">{{item.user.nickname}}</text>
							</view>
						</block>
					</view>
				</scroll-view>

				<view class="my-info-bg">
					<view class="rank-bg">
						<text class="rank-tt">{{rankNumber}}</text>
					</view>

					<image class="avatar" :src="myInfo.avatar"></image>

					<text class="nickname">{{myInfo.nickname}}</text>
				</view>
			</view>
		</totalMask>
	</view>
</template>

<script>
	import storage from "@/utils/storage";
	import {
		getLiveUserList,
	} from "@/API/newLive.js";
	export default {
		data() {
			return {
				isShow: false,
				showType: 0,

				page: 1,
				total: 0,
				list: [],
				myInfo: {
					avatar: "",
					nickname: ""
				},
				rankNumber: 0,
			}
		},
		mounted() {
			uni.$on("showLiveUserList", () => {
				this.isShow = true
				this.showType = 9
				this.onRefresh()
			});
			uni.$on("refreshUserList", () => {
				this.onRefresh()
			});
			/**
			 * 物理返回键退出
			 */
			uni.$on("onAndroidBackPress", () => {
				this.onDestroyed()
			});
		},
		methods: {
			/**
			 * 销毁
			 */
			onDestroyed() {
				uni.$off("showLiveUserList")
				uni.$off("onAndroidBackPress")
				uni.$off("refreshUserList")
			},
			/**
			 * 加载更多
			 */
			onLoadMore() {
				if (this.list.length < this.total) {
					this.page++
					this.getData()
				}
			},
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.list = []
				this.getData()
			},
			/**
			 * 网络请求
			 */
			async getData() {
				let res = await getLiveUserList(storage.getLiveRoomInfo().id, this.page)
				this.total = res.data.list.total
				let list = res.data.list.data
				if (this.page == 1) {
					this.list = list
					this.myInfo = res.data.my
					this.rankNumber = res.data.no
				} else {
					this.list = [...this.list, ...list]
				}
			},
			showUserInfo(user_id) {
				if (storage.getUserID() === storage.getLiveRoomInfo().user_id) {
					uni.$emit('showUserInfo', user_id)
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding-bottom: 120rpx;
		width: 100%;
		overflow: hidden;
		position: relative;
	}

	.title-bg {
		width: 300rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.title {
		color: #191919;
		font-size: 32rpx;
	}

	.list {
		margin-top: 30rpx;
		width: 750rpx;
		overflow: hidden;
		height: 500rpx;
	}

	.view {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		margin-bottom: 120rpx;
	}

	.item {
		width: 750rpx;
		height: 120rpx;
		padding: 0 30rpx;
		margin-bottom: 10rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
		overflow: hidden;
	}

	.rank-bg {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.rank-img {
		width: 60rpx;
		height: 60rpx;
	}

	.rank-tt {
		color: #333;
		font-size: 26rpx;
	}

	.avatar {
		margin-left: 25rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.nickname {
		margin-left: 30rpx;
		flex: 1;
		color: #1B1B1B;
		font-size: 30rpx;
	}

	.my-info-bg {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 120rpx;
		background-color: white;
		box-shadow: 0px 0px 27px 0px #DBDBDB;
		padding: 0 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
</style>